import {useAppDispatch, useAppSelector} from "@/store/store.ts";
import {switchTheme} from "@/store/system";
import {Popover} from "antd";
import {FaMoon, FaSun} from "react-icons/fa";
import styles from "./index.module.less";

const SwitchTheme = () => {
    const systemTheme = useAppSelector(state => state.system.theme)
    const dispatch = useAppDispatch();

    return (
        <Popover content={systemTheme == "dark" ? "切换为亮色模式":"切换为暗色模式"}>
            <div className={styles.themeIcon} onClick={() => {
                dispatch(switchTheme())
            }}>
                {systemTheme == "dark" ? <FaSun size={22} color={"#fff"}/> : <FaMoon size={24} color={"#000"}/>}
            </div>
        </Popover>
    );
};

export default SwitchTheme;
